<template>
  <div>
    <div class="headBtns">
      <div style="float:left;display:inline-block;">
        <el-button type="danger" round size="small" @click="addShili('1')">添加行事历</el-button>
        <el-button type="danger" round size="small" @click="importFile">行事历导入</el-button>
        <el-button type="danger" round size="small" @click="nonUse">批量停用</el-button>
      </div>
      <div style="float:right;display:inline-block">
        <el-select v-model="queryObj.zuzhi" placeholder="组织" style="width:120px" size="small">
          <el-option
            v-for="item in zuzhiList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryObj.gangweishuxing" placeholder="岗位属性" style="width:120px" size="small">
          <el-option
            v-for="item in gangweishuxingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryObj.zhuangtai" placeholder="状态" style="width:120px" size="small">
          <el-option
            v-for="item in zhuangtaiList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input
        size="small"
        style="width:220px"
        placeholder="请输入行事历名称或人员姓名"
        suffix-icon="el-icon-search"
        v-model="queryObj.shousuo">
        </el-input>
      </div>
    </div>
    <div class="w_list">
       <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="shilimingchen" label="行事历名称" width="120"></el-table-column>
        <el-table-column align="center" prop="shilineirong" label="行事历内容" width="120"></el-table-column>
        <el-table-column align="center" prop="shilileixin" label="行事历类型" :formatter="Form_leixin"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="zuzhishuxing" label="所属组织"></el-table-column>
        <el-table-column align="center" prop="gangweishuxin" label="岗位属性" :formatter="Form_gangweishuxin"></el-table-column>
        <el-table-column align="center" label="生效时间" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column align="center" prop="zhuangtai" label="状态" :formatter="Form_zhuangtai"></el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="addShili('0')">编辑</el-button>
            <el-button type="text" v-if="scope.row.zhuangtai !== '03'" @click="delectA">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 文件下载、上传 -->
    <el-dialog title="行事历导入" :visible.sync="dialogFile">
      <ul class="fileUpload">
        <li><span>导入模板文件下载：</span><span> <el-button type="danger" style='width:240px' size="small" @click="downloadFile">点击下载导入模板文件</el-button></span></li>
        <li><span>行事历清单：</span><span style="position:relative">
           <el-input style="width:240px;height:20px;" v-model="fileName" size="small" readonly placeholder="请选择（仅支持.xls/.xlsx格式文件）"></el-input>
           <el-upload style="display:inline-block;position:absolute;left:260px;height:30px" ref="upload"
            action="/"
            accept='.xls,.xlsx'
            :multiple="false"
            :limit=1
            :show-file-list="false"
            :before-upload="beforeLoad"
            :on-success="successRes"
            :on-error="errorRes"
            :auto-upload="false"
            :data="formData"
            :on-change="fileChecked"
            :on-progress="isUpdata"
           >
            <el-button size="small" type="danger">选择文件</el-button>
           </el-upload>
          </span></li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFile = false">取 消</el-button>
        <el-button type="primary" @click="submitLoadFile">导 入</el-button>
      </div>
    </el-dialog>

    <!-- 添加弹窗 -->
    <el-dialog title="添加行事历" :visible.sync="dialogVisible">
      <el-form :model="upDataForm">
        <el-form-item label="人员所属组织名称" label-width="150px">
          <el-input v-model="upDataForm.zuzhishuxing" :disabled="disabledInput.zuzhishuxing"></el-input>
        </el-form-item>
        <el-form-item label="人员信息" label-width="150px">
          <el-select v-model="upDataForm.renyuanxinxi" placeholder="请选择人员" multiple style="width:100%" 
                :disabled="disabledInput.renyuanxinxi">
            <el-option label="张三" value="shanghai"></el-option>
            <el-option label="李四" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行事历名称" label-width="150px" style="width:50%;float:left">
           <el-input v-model="upDataForm.shilimingchen" placeholder="请输入行事历名称" :disabled="disabledInput.shilimingchen"></el-input>
        </el-form-item>
        <el-form-item label="行事历类型" label-width="120px" style="width:50%;float:left">
          <el-select v-model="upDataForm.shilileixin" placeholder="请选择行事历类型" style="width:100%;"
                  :disabled="disabledInput.shilileixin">
            <el-option label="周事历" value="01"></el-option>
            <el-option label="月事历" value="02"></el-option>
            <el-option label="季事历" value="03"></el-option>
            <el-option label="半年事历" value="04"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行事历内容" label-width="150px" class="cf">
          <el-input type="textarea" :rows="3" placeholder="请输入行事历内容（限200字）" v-model="upDataForm.neirong"
             :disabled="disabledInput.neirong"
          ></el-input>
        </el-form-item>
        <el-form-item label="生效时间" label-width="150px">
          <el-select v-model="upDataForm.date" placeholder="生效时间" style="width:100%" :disabled="disabledInput.date">
            <el-option label="立即生效" value="1"></el-option>
            <el-option label="次年生效" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClick">添 加</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>



<script>

import {Loading} from 'element-ui'

export default {
    data() {
      return {
        dialogVisible:false,  //添加弹出框状态
        dialogFile:false,     //行事历导入弹出框状态
        upDataForm:{       //添加行事历的表单
          zuzhishuxing:'本组织',   
          renyuanxinxi:[],
          shilimingchen:'',
          shilileixin:'01',
          neirong:'',
          date:'1'
        },
        disabledInput:{
          zuzhishuxing:false,   
          renyuanxinxi:false,
          shilimingchen:false,
          shilileixin:false,
          neirong:false,
          date:false
        },


        tableData3: [{
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'01',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '02',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'01',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '02',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'01',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '03',
          }, {
          shilimingchen:'开学了',
          shilineirong:'的开发来看lkdf',
          shilileixin:'01',
          name: '王小虎',
          zuzhishuxing:'组织一',
          gangweishuxin: '02',
          date: '2016-05-03',
          zhuangtai: '02',
        }],

        multipleSelection: [],  //批量选择操作


        queryObj:{  //搜索查询
          zuzhi:"",//组织
          gangweishuxing:'',//岗位属性
          zhuangtai:"",    //状态
          shousuo:''     //搜索
        },


        zuzhiList:[
          {label:'党组织',value:'01'},
          {label:'共青团',value:'02'},
          {label:'少先队',value:'03'}
        ],
        gangweishuxingList:[
          {label:'党员',value:'01'},
          {label:'团员',value:'02'},
          {label:'小学生',value:'03'}
        ],
        zhuangtaiList:[
          {label:'学习中',value:'01'},
          {label:'高手',value:'02'},
          {label:'毕业了',value:'03'}
        ],
        
        fileName: '', //文件名称
        formData:{},  //文件导入的其他参数

      }
    },
    
    methods: {
      // 添加批量操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },



      //
      Form_leixin(row,column){
        return row.shilileixin == '01' ? '周事例' : row.shilileixin == '02' ? '月事例' : row.shilileixin == '03' ? '季事例' : '半年事例'
      },
      //
      Form_zhuangtai(row,column){
        return row.zhuangtai == '01' ? '停用' : row.zhuangtai == '02' ? '启用' : row.zhuangtai == '03' ? '已归档' : '全部'
      },
      //
      Form_gangweishuxin(row,column){
        return row.gangweishuxin == '01' ? '书记' : row.gangweishuxin == '02' ? '党员' : '未知'
      },


      //添加事例 val='1'  //编辑行事历 val='0'
      addShili(val){
        if(val == '1'){
          for(let k in this.disabledInput){
            this.disabledInput[k] = false;
          } 
        }else{
          this.disabledInput.zuzhishuxing = true;
          this.disabledInput.renyuanxinxi = true;
          this.disabledInput.shilileixin = true;
        };
        let self = this;
        self.dialogVisible = true
      },

      //确认添加
      addClick(){
        let self = this;
        self.dialogVisible = false;


      },

      //下载模板文件
      downloadFile(){
        window.location.href = '../../../static/tmpFile/batchImport.xlsx'
      },

      //批量导入
      importFile(){
        let self = this;
        self.dialogFile = true;
      },
      //选择文件后
      fileChecked(file,fileList){
        if(fileList.length > 1){
          fileList.splice(0,1)
        };
        this.fileName = file.name;
      },
      //上传之前的校验
      beforeLoad(file){
        const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
          || file.type === 'application/vnd.ms-excel';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if(!isExcel){
          this.$alert('上传文件必须为excel格式', '提示', {
            type:'info',
            confirmButtonText: '确定',
            showClose:false}).then(function(){return });
        };
        if(!isLt5M){
          this.$alert('上传文件大小不能超过5M', '提示', {
            type:'info',
            confirmButtonText: '确定',
            showClose:false}).then(function(){return});
        }
        return isExcel && isLt5M ;
      },
      //确认导入
      submitLoadFile(){
        this.$refs.upload.submit();
      },
      //上传成功
      successRes(res){
        this.dataUp.close();
      },
      //上传失败
      errorRes(res){
        this.dataUp.close();
      },
      //上传加载loading
      isUpdata(event,file){
        this.dataUp = Loading.service({fullscreen:true})
      },


      
      //批量停用
      nonUse(){
        
      },

      //删除
      delectA(){

      },

    }
  }

</script>


<style scoped>
  .headBtns{
    width: 100%;
    height: 48px;
    line-height: 48px;
    /* border: 1px solid #FF5656; */
    padding: 0 10px;
    background:#fff
  }
  .w_list{
    margin-top: 25px;
    /* border: 1px solid #FF5656 */
  }


  .cf::before{
    display: block;
    clear: both;
    content: ""
  }


  .fileUpload li{
    height: 46px;
  }
  .fileUpload li>span:first-child{
    display:inline-block;
    width: 130px;
    text-align: right;
  }

</style>